<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Test | jQuery Plugin | betterLoader</title>
	<script type="text/javascript" language="javascript" src="../jquery.js"></script>
	<script type="text/javascript" language="javascript" src="../jquery.betterLoader.js"></script>
	<script type="text/javascript" language="javascript">
		$(document).ready(function()	{	
			/*
			 *
			 * First of all, set your attributes
			 *
			 */
			var options = {
				loading: "#loading",
				fire: ".example",
				message: "<img src='loading.gif' border='0' /><br />Loading Custom Message...",
				target: "#target"
			}
			
			/*
			 *
			 * You can call the function, doing this
			 *
			 */
			$(".example").betterLoader(options);
			/*
			 *
			 * Or, doing this
			 * $(".example").betterLoader({loading: "#loading", fire: ".example",	message: "<img src='loading.gif' border='0' /><br />Loading Custom Message...", target: "#target"});
			 *
			 */
		});
		
	</script>
	
	<style type="text/css">
		*	{
			font-family: Verdana;
			font-size: 12px;
			color: #000000;
		}
		
		#topic	{
			background-color: #CCCCCC;
			border: 2px solid black;
			width: 800px;
			height: 600px;
			margin-left: 20%;
		}
		
		#loading	{
			background-color: #FFFFFF;
			border: 2px solid red;
			width: 700px;
			height: 100px;
			margin-left: 30px;
		}
		
		#target	{
			background-color: #F2F2F2;
			border: 2px solid blue;
			width: 700px;
			height: 100px;
			margin-left: 30px;
		}
	</style>
</head>

<body>
	<div id="topic" align="center">
		<p align='center'>
			<a href="javascript: void(0)" class="example" rel="test2.html">Click here to open a test page in html</a>
			<br />
			<a href="javascript: void(0)" class="example" rel="test3.html">Click here to open another test page in html</a>
		</p>
		<br /><br />
		<div id="loading" align='center'>&nbsp;</div>
		<br /><br />
		<div id="target" align='center'>&nbsp;</div>
		<br /><br />
	</div>
</body>

</html>